<template>
  <div>
    <div class="wrapper">
      <div class="outer">
        <div class="item-box">
          <text class="login-font" :style="{fontFamily: 'wxcIconFont'}">{{'\ue788'}}</text>
          <input class="login-input" type="text" placeholder="用户名" v-model="username">
        </div>
        <div class="item-box">
          <text class="login-font" :style="{fontFamily: 'wxcIconFont'}">{{'\ue699'}}</text>
          <input class="login-input" type="password" placeholder="密码" v-model="password">
        </div>
        <wxc-button text="登录"
                    :btn-style="{ width: 600, marginTop: 80, backgroundColor: 'rgba(255,255,255,0.5611)'}"
                    :text-style="{ color: 'white', fontSize: 34}"
                    @wxcButtonClicked="onLogin"
                    ></wxc-button>
      </div>
    </div>
  </div>
</template>

<script>
import { WxcButton } from 'weex-ui'
import { addIconFontSupport } from '@/config/iconConfig'
import user from '../net/user'
const dom = weex.requireModule('dom')

export default {
  name: 'login',
  components: { WxcButton },
  data () {
    return {
      username: 'admin',
      password: 'nes51663300'
    }
  },
  beforeCreate () {
    this.$notice.loading.show()
    this.$nextTick(() => {
      this.$notice.loading.hide()
    })
  },
  created () {
    addIconFontSupport(dom, '../../')
  },
  methods: {
    onLogin () {
      this.$notice.loading.show()
      user.doLogin(this.username, this.password).then(res => {
        if (res) {
          this.$router.open({
            name: 'home',
            canBack: false
          })
          this.$notice.loading.hide()
        }
      })
    }
  }
}
</script>

<style lang="scss">
  @import '../config/styles.scss';

  .wrapper {
    flex: 1;
    align-items: center;
    background-image: linear-gradient(to bottom right,#6F86D6,#48C6EF);
  }
  .outer {
    width: 600px;
    margin-top: 200px;
  }
  .login-font {
    color: $--theme-color;
    font-size: 34px;
  }
  .item-box {
    border-bottom-color: $--theme-color;
    border-bottom-width: 6px;
    border-bottom-style: solid;
    height: 110px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-top: 20px;
  }
  .login-input {
    margin-left: 20px;
    margin-top: 8px;
    width: 550px;
    color: $--theme-color;
    placeholder-color: $--theme-color;
    padding: 4px;
    font-size: 34px;
  }
</style>
